window.onload = function () {
  bSideBackTop();
  logoChange();
  navSearch();
  navExtend();
  bannerAnimate();
  fastShop();
  fastShopBanner();
  videoPlay();
}
function getScroll() {
  return {
    top: window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,
    left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft
  }
}
function bSideBackTop() {
  // 获取按钮
  var backTop = document.querySelector(".backTop");
  var timeId;
  var isTop = false;
  window.onscroll = function () {
    var currentScrollTop = getScroll().top;
    backTop.style.display = currentScrollTop >= 500 ? "block" : "none";
    if(!isTop) {
      clearInterval(timeId);
    }
    isTop = false;
  }
  backTop.onclick = function () {
    timeId = setInterval(function () {
      isTop = true;
      var currentScrollTop = getScroll().top;
      var speed = Math.floor(- currentScrollTop / 6);
      document.documentElement.scrollTop = document.body.scrollTop = currentScrollTop + speed;
      if (currentScrollTop === 0) {
        clearInterval(timeId);
      }
    },20);
  }


}
function logoChange() {
  var logo = document.querySelector(".logo");
  var logoSpan = logo.querySelector("span");
  logo.addEventListener("mouseover",function () {
    logoSpan.innerHTML = "&#xe799;";
  },false);
  logo.addEventListener("mouseout",function () {
    logoSpan.innerHTML = "&#xe661;";

  },false);
}
function navSearch() {
  var form = document.querySelector(".navForm");
  var formSearch = document.querySelector(".navSearch");
  var formSS = document.querySelector(".navSS");
  formSearch.addEventListener("focus",function () {
    form.style.border = "1px solid #ff6700";
    formSearch.style.borderRight = "1px solid #ff6700";
  });
  formSearch.addEventListener("blur",function () {
    form.style.border = "1px solid #b0b0b0";
    formSearch.style.borderRight = "1px solid #b0b0b0";
  });
  formSS.addEventListener("mouseover",function () {
    form.style.backgroundColor = "#ff6700";
    formSearch.style.backgroundColor = "#fff";
    formSS.style.backgroundColor = "#ff6700";

  });
  formSS.addEventListener("mouseout",function () {
    form.style.backgroundColor = "#fff";
    formSS.style.backgroundColor = "#fff";
    formSearch.style.backgroundColor = "#fff";

  });
}
function navExtend() {
  // 获取navbar-main中li元素，为每个li加自定义属性index
  var navMidLis = document.querySelectorAll(".navbar-middle ul li");
  for (var i = 0; i<navMidLis.length; i++) {
    navMidLis[i].index = i;
  }
  // 获取ul
  var navMidUl = document.querySelector(".navbar-middle ul");
  // 获取扩展盒子
  var navExtBox = document.querySelector(".navExtended");
  // 获取navExtended中的div,为div添加自定义属性index
  var navExtDivs = document.querySelectorAll(".navExtended .navEM");
  for (var i = 0; i<navExtDivs.length; i++) {
    navExtDivs[i].index = i;
  }
  // 为li注册事件，鼠标经过时
  for (var i = 1; i<navMidLis.length - 2; i++) {
    navMidLis[i].addEventListener("click",function (e) {
      flag = true;
      var index = this.index - 1;
      for (var i = 1; i<navMidLis.length; i++) {
        navMidLis[i].childNodes[1].classList.remove("navMidActive");
      }
      navMidLis[index + 1].childNodes[1].classList.add("navMidActive");
      // 取消每个扩展盒子,并且只显示当前的扩展盒子
      navExtBox.style.display = "block";
      for (var i = 0;i < navExtDivs.length; i++) {
        navExtDivs[i].style.display = "none";
      }
      navExtDivs[index].style.display = "block";
      navMidUl.addEventListener("mouseleave",function () {
        console.log(1111)
        navExtBox.style.display = "none";
        for (var i = 0;i < navExtDivs.length; i++) {
          navExtDivs[i].style.display = "none";
        }
        for (var i = 1; i<navMidLis.length; i++) {
          navMidLis[i].childNodes[1].classList.remove("navMidActive");
        }
        // navExtDivs[index].style.display = "none";
      });
      // 鼠标离开盒子时，盒子消失
      navExtDivs[index].addEventListener("mouseenter",function () {
        for (var i = 1; i<navMidLis.length; i++) {
          navMidLis[i].childNodes[1].classList.remove("navMidActive");
        }
        navMidLis[index + 1].childNodes[1].classList.add("navMidActive");
        navExtBox.style.display = "block";
        for (var i = 0;i < navExtDivs.length; i++) {
          navExtDivs[i].style.display = "none";
        }
        navExtDivs[index].style.display = "block";
      });
      navExtDivs[index].addEventListener("mouseleave",function () {
        console.log(navMidLis[index + 1].children)
        for (var i = 1; i<navMidLis.length; i++) {
          navMidLis[i].childNodes[1].classList.remove("navMidActive");
        }
        navExtBox.style.display = "none";
        for (var i = 0;i < navExtDivs.length; i++) {
          navExtDivs[i].style.display = "none";

        }
        navExtDivs[index].style.display = "none";
      });
      // var that = this
    },true);
  }
}
function bannerAnimate() {
  // 轮播盒子
  var banner = document.querySelector(".xm_banner");
  var bannerWidth = banner.offsetWidth;
  var bannerHeight = banner.offsetHeight;
  // 获取轮播图宽度
  var bannerBox = document.querySelector(".bannerBox");
  // 复制第一张和最后一张图片
  var first = bannerBox.querySelector("li:first-of-type");
  var last = bannerBox.querySelector("li:last-of-type");
  bannerBox.appendChild(first.cloneNode(true));
  bannerBox.insertBefore(last.cloneNode(true),bannerBox.firstChild);
  // 获取照片
  var lis = bannerBox.querySelectorAll("li");
  // 侧边栏
  var sidebar = document.querySelector(".sidebar");
  var sideUL = sidebar.querySelector(".sidebarUL");
  var sidelis = sideUL.querySelectorAll("li");
  for (var i = 0; i<sidelis.length; i++) {
    sidelis[i].index = i;
  }
  // 侧边栏盒子
  var sidebarBox = document.querySelector(".sidebarBox");
  var sidebarBoxDiv = sidebarBox.querySelectorAll(".sidebarBoxDiv");
  console.log(sidebarBoxDiv)
  for (var i = 0; i<sidebarBoxDiv.length; i++) {
    sidebarBoxDiv[i].index = i;
  }
  var count = lis.length;
  var index = 1;
  // 屏幕大小改变及时修改宽度
  window.onresize = function () {
    bannerWidth = banner.offsetWidth;
    bannerHeight = banner.offsetHeight;
    banner.style.width = bannerWidth + "px";
    bannerBox.style.width = count*bannerWidth + "px";
    bannerBox.style.left = -index*bannerWidth + "px";
    console.log(1)
    console.log(innerWidth)
    console.log(innerHeight)
    for (var i = 0; i < count; i++) {
      lis[i].style.width = bannerWidth + "px";
    }
  }

  // 为侧边栏盒子的li标签注册事件
  function sidebarLI(){
    for (var i = 0; i<sidelis.length; i++) {
      // 进入li注册事件
      sidelis[i].addEventListener("mouseover",function (e) {
        for (var i = 0; i < sidelis.length; i++){
          sidebarBoxDiv[i].style.display = "none";
        }
        var index = this.index;
        sidebarBox.style.display = "block";
        sidebarBoxDiv[index].style.display = "block";
        // 进入侧边盒子注册事件
        sidebarBoxDiv[index].addEventListener("mouseover",function (e) {
          sidebarBox.style.display = "block";
          sidebarBoxDiv[index].style.display = "block";
        },false);
        // 离开侧边盒子注册事件
        sidebarBoxDiv[index].addEventListener("mouseout",function (e) {
          for (var i = 0; i < sidelis.length; i++){
            sidebarBoxDiv[i].style.display = "none";
          }
          sidebarBox.style.display = "none";
        },false);
      },false);
      // 离开li注册事件
      sidelis[i].addEventListener("mouseout",function (e) {
        for (var i = 0; i < sidelis.length; i++){
          sidebarBoxDiv[i].style.display = "none";
        }
        sidebarBox.style.display = "none";
      },false);
    }
  }
  sidebarLI();
  // console.log(count);
  banner.style.width = bannerWidth + "px";
  bannerBox.style.width = count*bannerWidth + "px";
  bannerBox.style.left = - index*bannerWidth + "px";
  for (var i = 0; i < count; i++) {
    lis[i].style.width = bannerWidth + "px";
  }
  // 定时器实现轮播效果
  var timeId;
  function start() {
    timeId = setInterval(function () {
      index++;
      if (index === count - 1) {
        index = 1;
      }
      bannerBox.style.transition = "left 0.5s";
      bannerBox.style.left = - index*bannerWidth + "px";
    },2000);
  }
  start(index);
  // 点标记函数
  var bannerDot = document.querySelector(".bannerDot");
  var lisDot = bannerDot.querySelectorAll("li");
  for (var i = 0; i <lisDot.length; i++) {
    lisDot[i].index = i;
  }
  function Dot(index) {
    for (var i = 0; i <lisDot.length; i++) {
      lisDot[i].classList.remove("active");
    }
    lisDot[index - 1].classList.add("active");
  }
  // 点击小圆点实现图片跳转
  function DotJump() {
    for (var i = 0; i < lisDot.length; i++) {
      lisDot[i].addEventListener("click",function (e) {
        clearInterval(timeId);
        for (var i = 0; i <lisDot.length; i++) {
          lisDot[i].classList.remove("active");
        }
        this.classList.add("active");
        index = this.index + 1;
        bannerBox.style.transition = "left 0.5s";
        bannerBox.style.left = - index*bannerWidth + "px";
      });
    }
  }
  DotJump();
  // 点击左右箭头实现滑动
  function DirectionJump() {
    $(".bannerLeft").off("click").on("click",function(){
      clearInterval(timeId);
      console.log("index");
      index--;
      if (index === 0) {
        index = count - 2;
      }
      bannerBox.style.transition = "left 0.5s";
      // bannerBox.style.transition = "none";
      bannerBox.style.left = - index*bannerWidth + "px";
    });
    $(".bannerRight").off("click").on("click",function(){
      clearInterval(timeId);
      console.log("index");
      index++;
      if (index === count - 1) {
        index = 1;
      }
      bannerBox.style.transition = "left 0.5s";
      // bannerBox.style.transition = "none";
      bannerBox.style.left = - index*bannerWidth + "px";
    });
  }
  DirectionJump();
  // 监听动画结束
  bannerBox.addEventListener("webkitTransitionEnd",function (e) {
    if (index === count - 1) {
      index = 1;
      bannerBox.style.transition = "none";
      bannerBox.style.left = - index*bannerWidth + "px";
    } else if (index === 0) {
      index = count - 2;
      bannerBox.style.transition = "none";
      bannerBox.style.left = - index*bannerWidth + "px";
    }
    Dot(index);
    // setTimeout()和setInterval()不同的是前者只执行一次
    setTimeout(function () {
      clearInterval(timeId);
      DirectionJump();
      start();
      DotJump();
      sidebarLI();
    },100);
  });

}
function fastShop() {
  var fastLTime = document.querySelector(".fastLTime");
  var fastLTimeSpans = fastLTime.querySelectorAll("span");
  console.log(fastLTimeSpans)
  var times = 13661;
  var hours = 0;
  var minutes = 0;
  var seconds = 0;
  setInterval(function () {
    times--;
    hours = Math.floor(times / 3600);
    minutes = Math.floor(times % 3600 / 60);
    seconds = Math.floor(times % 3600 % 60);
    hours = hours >= 10 ? hours : "0" + hours;
    minutes = minutes >= 10 ? minutes : "0" + minutes;
    seconds = seconds >= 10 ? seconds : "0" + seconds;
    fastLTimeSpans[0].innerHTML = hours;
    fastLTimeSpans[2].innerHTML = minutes;
    fastLTimeSpans[4].innerHTML = seconds;
  },1000);
}
function fastShopBanner() {
  // 获取轮播盒子
  var fastRBox = document.querySelector(".fastR");
  // 获取图片容器
  var fastRUl = document.querySelector(".fastRUl");
  // 获取所有li
  var fastRUlLis = fastRUl.querySelectorAll("li");
  // 获取一个li的宽度，包括margin
  var fastRUlLisWidth = $(fastRUlLis[0]).outerWidth(true);
  // 获取轮播盒子宽度
  var fastRBoxWidth = fastRBox.offsetWidth;
  // 计算图片容器宽度,并给其赋值
  var fastRUlWidth = fastRUlLisWidth * fastRUlLis.length;
  console.log(fastRUlWidth)
  fastRUl.style.width = fastRUlWidth + "px";
  var maxmove = 0;
  var minmove = fastRBoxWidth - fastRUlWidth;
  console.log(fastRBoxWidth)
  console.log(minmove)
  var current = 0;
  var fastShopLeft = document.querySelector(".fastShopDirectionL");
  var fastShopRight = document.querySelector(".fastShopDirectionR");
  fastShopLeft.addEventListener("click",function () {
    if(current + fastRBoxWidth > maxmove) {
      current = maxmove;
      fastRUl.style.transition = "left 0.5s";
      fastRUl.style.left = current + "px";
      return;
    }
    fastRUl.style.transition = "left 0.5s";
    fastRUl.style.left = current + fastRBoxWidth + "px";
    current = current + fastRBoxWidth;
  });
  fastShopRight.addEventListener("click",function () {
    if(current - fastRBoxWidth < minmove) {
      current = minmove;
      fastRUl.style.transition = "left 0.5s";
      fastRUl.style.left = current + "px";
      this.style.fontWeight = "normal";
      return;
    }
    fastRUl.style.transition = "left 0.5s";
    fastRUl.style.left = current - fastRBoxWidth + "px";
    current = current - fastRBoxWidth;
  });
}
function videoPlay() {
  var videoPlayButton = document.querySelector(".videoPlayButton");
  var video = document.getElementsByTagName("video")[0];
  var videoBox = document.querySelector(".videoBox");
  var playOrPause = document.querySelector(".playOrPause");
  var playOrPauseSpan = playOrPause.children[0];
  var isPlay = true;
  var videoTime = document.querySelector(".videoTime");
  var timeId;
  var totalSeconds;
  var videoBar = document.querySelector(".videoBar");
  var videoBarWidth = videoBar.offsetWidth;
  var videoLine = document.querySelector(".videoLine");
  var enlarge = document.querySelector(".enlarge");
  var isFull = false;
  var videoBack = document.querySelector(".videoBack");
  // 时间计算，秒数转为时间
  function timeChange(seconds){
    var h = Math.floor(seconds/3600);
    var m = Math.floor(seconds%3600/60);
    var s = Math.floor(seconds%3600%60);
    return (h > 9 ? h : "0" + h) + ":" + (m > 9 ? m : "0" + m) + ":" + (s > 9 ? s : "0" + s);
  }
  // 视频加载完
  video.onloadedmetadata = function() {
    totalSeconds = video.duration;
    videoTime.children[2].innerHTML = timeChange(totalSeconds);
  }
  videoPlayButton.onclick = function () {
    videoBox.style.display = "block";

    videoBack.onclick = function () {
      videoBox.style.display = "none";
    }
    // 播放与暂停
    playOrPause.addEventListener("click",function () {
      if (isPlay === true) {
        video.pause();
        clearInterval(timeId);
        playOrPauseSpan.innerHTML = "&#xe67d;";
        isPlay = false;
      } else {
        video.play();
        timeIncrement();
        playOrPauseSpan.innerHTML = "&#xe67b;";
        isPlay = true;
      }
    });
    // 定时器自增
    function timeIncrement() {
      timeId = setInterval(function () {
        // video.currentTime++;
        if (video.currentTime >= totalSeconds) {
          video.currentTime = totalSeconds;
          videoTime.children[0].innerHTML = timeChange(video.currentTime);
          clearInterval(timeId);
        }
        videoTime.children[0].innerHTML = timeChange(video.currentTime);
      },1000);
    }
    // 时间变化，对进度条和计数器做修改
    video.ontimeupdate = function () {
      videoLine.style.width = (video.currentTime / totalSeconds) * 100 + "%";
      videoTime.children[0].innerHTML = timeChange(video.currentTime);
      console.log("click")
    }
    // 进度条点击事件
    videoBar.onclick = function (e) {
      var offset = e.offsetX;
      video.currentTime = offset / videoBarWidth * totalSeconds;
      console.log(video.currentTime)
    }
    // 视频结束
    video.onended = function () {
      // 当前的视频时间清零
      video.currentTime = 0;
      videoLine.style.width = (video.currentTime / totalSeconds) * 100 + "%";
      videoTime.children[0].innerHTML = timeChange(video.currentTime);
      playOrPauseSpan.innerHTML = "&#xe67d;";
      isPlay = false;
    }
    // 全屏事件
    enlarge.onclick = function(){
      if(isFull === false) {
        video.webkitRequestFullScreen();  // 全屏显示
        isFull = true;
      } else {
        document.webkitCancelFullScreen();  // 取消 全屏显示  跟元素无关 跟document有关系
        isFull = false;
      }
    }
  }
}
